<template>
  <view class="category">
    <YgSearch></YgSearch>
    <view class="main">
      <view class="menu">
        <view
          :class="['menu-item',index===currentIndex?'active':'']"
          v-for="(item,index) in  menus"
          @tap="onMenuTap(index)"
          :key="item"
        >{{item}}</view>
      </view>
      <scroll-view
        scroll-y
        class="content"
        :scroll-top="scrollTop"
      >
        <view
          class="group"
          v-for="item1 in goods"
          :key="item1.cat_id"
        >
          <view class="content-title">{{item1.cat_name}}</view>
          <view class="goods-content">
            <navigator
              v-for="item2 in item1.children"
              :key="item2.cat_id"
              :url="`/pages/goods_list/goods_list?id=`+item2.cat_id"
            >
              <image
                :src="item2.cat_icon"
                mode="widthFix"
              ></image>
              <view class="goods-name">{{item2.cat_name}}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
/* 
在data当中定义的数据 一定要在页面中 渲染使用 否则就不要定义在data中 

1 打开页面 先判断有没有本地存储的数据
  1 有数据 
    1 再去判断看 时间过期了没有 
      1 时间过期了  发送新的请求
      2 时间没有过期 才会去使用缓存的数据
    
  2 没有数据
    1 发送新的请求

2 什么时候存数据进去合适 存数据结构是怎么
  1 发送请求 数据回来 就存
  2 数据格式 
    {time:"存入的时间戳",data:接口的数据}
  

 */

// 全局变量 js内部中使用 没有在 标签中使用
let message = [];

export default {
  data() {
    return {
      // 左侧标题菜单
      menus: [""],
      // 右侧的商品数据
      goods: [],
      // 菜单选中索引
      currentIndex: 0,
      // 接口数据所有的返回值 全局变量而已！！！
      // message: [],
      // 右侧内容列表的滚动距离
      scrollTop: 0,
    };
  },
  async onLoad() {
    // 先获取本地存储的数据
    const category = uni.getStorageSync("category");
    if (category) {
      // 存在有数据
      // 判断时间有没有过期 3分钟
      if (Date.now() - category.time > 15 * 1000) {
        // 数据 过期了  重新发送请求
        console.log("过期了 重新发送请求");
        this.getCategories();
      } else {
        console.log("没有过期 可以使用旧数据");
        message = category.data;
        this.menus = message.map((v) => v.cat_name);
        // 处理右侧商品的数据
        this.goods = message[0].children;
      }
    } else {
      // 不存在没有数据
      this.getCategories();
    }
  },
  methods: {
    onMenuTap(index) {
      this.currentIndex = index;
      this.goods = message[index].children;
      // 设置右侧scroll-view的滚动距离为 0
      // scrollTop 不能重复设置相同的值  0
      // scrollTop = 0-1  中间变化 ！！
      let random = Math.random() * Math.random() * Math.random();
      this.scrollTop = random;
    },
    // 发送请求获取数据
    async getCategories() {
      const res = await this.$u.api.getCategories();
      message = res.message;
      // 存储数据
      uni.setStorageSync("category", { data: message, time: Date.now() });

      this.menus = message.map((v) => v.cat_name);
      // 处理右侧商品的数据
      this.goods = message[0].children;
    },
  },
};
</script>

<style lang="scss">
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
    display: flex;
    overflow: hidden;
    .menu {
      width: 182rpx;
      overflow: auto;
      .menu-item {
        height: 70rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .active {
        border-left: 3rpx solid #eb4450;
        color: #eb4450;
      }
    }
    .content {
      flex: 1;
      overflow: auto;
      .content-title {
        height: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        &::before,
        &::after {
          content: "/";
        }
      }
      .goods-content {
        display: flex;
        flex-wrap: wrap;
        navigator {
          width: 33.33%;
          padding: 10rpx;
          box-sizing: border-box;
          text-align: center;
          image {
            width: 70%;
          }
          .goods-name {
          }
        }
      }
    }
  }
}
</style>